<template>
  <div>
    <div class="box" id="peisingContent">
      <div
        class="flex justify_center"
        style="font-size: 16px; font-weight: 600"
      >
        四川威斯腾物流有限公司
      </div>
      <div
        class="flex justify_center"
        style="font-size: 16px; font-weight: 600; margin-bottom: 24px"
      >
        下发派车单
      </div>
      <a-image class="logoImg" src="/logo.png"></a-image>
      <div class="flex">
        <div
          style="
            height: 300px;
            width: 36px;
            writing-mode: tb-rl;
            margin-top: 40px;
            margin-right: 10px;
          "
        >
          <div class="flex justify_center">
            <div style="margin-bottom: 20px">第一联存根</div>
            <div style="margin-bottom: 20px">第二联财务</div>
            <div>第三联客户</div>
          </div>
          <div class="flex justify_center">
            <div style="margin-bottom: 20px">第四联司机</div>
            <div>第五联操作</div>
          </div>
        </div>
        <div class="flex_1">
          <div class="flex" style="margin-bottom: 8px">
            <div class="flex align_center">
              <div>配送单位：</div>
              <div v-if="is_one" :style="{ width: '240px' }">
                {{ handlePeiSong(itemData.peisong_dept_id) }}
              </div>
              <a-select
                v-else
                :options="dept_list"
                :filter-option="filterOption"
                :field-names="{ value: 'id', label: 'name' }"
                v-model="itemData.peisong_dept_id"
                :style="{ width: '240px' }"
                placeholder="请选择"
              />
            </div>
            <div
              class="flex justify_between"
              style="flex: 1; margin-left: 30px"
            >
              <div>车牌号：</div>
              <div>派单人：{{ props.user.nickname }}</div>
            </div>
          </div>
          <div class="border">
            <div class="flex">
              <div class="flex flex_1 text_center">
                <div class="padd12 bor_r bor_b center" style="width: 100px">
                  <div>运单编号</div>
                </div>
                <div class="flex_1 padd12 bor_r bor_b center">
                  <div>{{ itemData.yundanhao }}</div>
                </div>
              </div>
              <div class="flex flex_1 text_center">
                <div class="padd12 bor_r bor_b center" style="width: 130px">
                  <div>运输类型</div>
                </div>
                <div class="flex_1 padd12 bor_b center">
                  <div v-if="is_one">
                    {{ handleYunshu(itemData.transport_type) }}
                  </div>
                  <a-select
                    v-else
                    :options="transporTypeList"
                    v-model="itemData.transport_type"
                    :field-names="{ value: 'key', label: 'title' }"
                    :style="{ width: '240px' }"
                    placeholder=""
                  />
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="flex flex_1 text_center">
                <div class="padd12 bor_r bor_b center" style="width: 100px">
                  <div>发货单位</div>
                </div>
                <div class="flex_1 padd12 bor_r bor_b center">
                  <div v-if="is_one">{{ handledept(itemData.dept_id) }}</div>
                  <a-select
                    v-else
                    :options="dept_lists"
                    :filter-option="filterOption"
                    v-model="itemData.dept_id"
                    :field-names="{ value: 'id', label: 'name' }"
                    :style="{ width: '240px' }"
                    placeholder=""
                    @change="handleChange"
                  />
                </div>
              </div>
              <div class="flex flex_1 text_center">
                <div class="padd12 bor_r bor_b center" style="width: 130px">
                  <div>发货电话</div>
                </div>
                <div class="flex_1 padd12 bor_b center">
                  <div v-if="is_one">{{ itemData.fh_mobile }}</div>
                  <a-input
                    v-else
                    :style="{ width: '240px' }"
                    v-model="itemData.fh_mobile"
                    placeholder=""
                    allow-clear
                  />
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="flex flex_1 text_center">
                <div class="padd12 bor_r bor_b center" style="width: 100px">
                  <div>收货单位</div>
                </div>
                <div class="flex_1 padd12 bor_r bor_b center">
                  <div v-if="is_one">{{ itemData.delivery_unit }}</div>
                  <a-input
                    v-else
                    :style="{ width: '240px' }"
                    v-model="itemData.delivery_unit"
                    placeholder=""
                    allow-clear
                  />
                </div>
              </div>
              <div class="flex flex_1 text_center">
                <div class="padd12 bor_r bor_b center" style="width: 130px">
                  <div>收货电话</div>
                </div>
                <div class="flex_1 padd12 bor_b center">
                  <div v-if="is_one">{{ itemData.delivery_tel }}</div>
                  <a-input
                    v-else
                    :style="{ width: '240px' }"
                    v-model="itemData.delivery_tel"
                    placeholder=""
                    allow-clear
                  />
                </div>
              </div>
            </div>
            <div class="flex text_center">
              <div class="padd12 bor_r bor_b center" style="width: 100px">
                <div>接取地址</div>
              </div>
              <div
                class="flex_1 padd12 bor_b center"
                style="justify-content: flex-start"
              >
                <div v-if="is_one">{{ itemData.fh_address }}</div>
                <div class="flex" v-else>
                  <a-input
                    :style="{ width: '604px' }"
                    v-model="itemData.fh_address"
                    placeholder="请输入详细地址"
                    allow-clear
                    v-if="contractList.length == 0"
                  />
                  <a-select
                    v-if="contractList.length != 0"
                    :options="contractList"
                    v-model="itemData.shipping_address"
                    :field-names="{ value: 'id', label: 'address' }"
                    :style="{ width: '604px' }"
                    placeholder=""
                    @change="handleAddress"
                  />
                </div>
              </div>
            </div>
            <div class="flex text_center">
              <div class="flex_1 flex">
                <div class="padd12 bor_r bor_b center" style="width: 100px">
                  <div>品名</div>
                </div>
                <div class="flex_1 padd12 bor_r bor_b center">
                  <div>件数</div>
                </div>
                <div class="flex_1 padd12 bor_r bor_b center">
                  <div>重量</div>
                </div>
                <div class="flex_1 padd12 bor_r bor_b center">
                  <div>体积</div>
                </div>
              </div>
              <div class="flex_1 flex">
                <div class="padd12 bor_r bor_b center" style="width: 130px">
                  <div>车号(箱号)</div>
                </div>
                <div class="flex_1 padd12 bor_r bor_b center">
                  <div>派单时间</div>
                </div>
                <div class="flex_1 padd12 bor_b center">
                  <div v-if="is_one">{{ itemData.pick_time }}</div>
                  <div v-if="!is_one">
                    <a-date-picker
                      style="width: 110px"
                      show-time
                      v-memo="itemData.pick_time"
                      format="YYYY-MM-DD HH:mm"
                      @change="onChange"
                    />
                  </div>
                </div>
              </div>
            </div>
            <!-- 货物数据 -->
            <div class="flex text_center">
              <div class="flex flex_column" style="width: calc(50% + 130px)">
                <div
                  class="flex"
                  v-for="(item, index) in itemData.goods_data"
                  :key="index"
                >
                  <div class="padd12 bor_r bor_b center" style="width: 100px">
                    <!-- <div v-if="item.type == 1">
                      {{ itemData.goods_name }}
                    </div>
                    <div v-if="item.type == 2"></div> -->
                    <div
                      :style="{ color: item.type == 2 ? 'transparent' : '' }"
                    >
                      {{ itemData.goods_name }}
                    </div>
                  </div>
                  <div class="flex_1 padd12 bor_r bor_b center">
                    <div v-if="item.type == 1">{{ item.number_yu }}</div>
                    <div v-if="item.type == 2"></div>
                  </div>
                  <div class="flex_1 padd12 bor_r bor_b center">
                    <div v-if="item.type == 1">{{ item.hz_weight }}</div>
                    <div v-if="item.type == 2"></div>
                  </div>
                  <div class="flex_1 padd12 bor_r bor_b center">
                    <div></div>
                  </div>
                  <div class="padd12 bor_r bor_b center" style="width: 130px">
                    <div v-if="item.type == 1">
                      {{
                        itemData.transport_type == 1
                          ? item.box
                          : itemData.car_no
                      }}
                    </div>
                    <div v-if="item.type == 2"></div>
                  </div>
                </div>
                <!-- <div class="flex">
                                    <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                        <div>运输要求</div>
                                    </div>
                                    <div class="flex_1 padd12 bor_r bor_b center" >
                                        <div v-if="is_one">{{ itemData.require }}</div>
                                        <a-input v-else :style="{width:'340px'}" v-model="itemData.require" placeholder="" allow-clear />
                                    </div>
                                </div> -->
                <div class="flex flex_1">
                  <div class="padd12 bor_r center" style="width: 100px">
                    <div>备注</div>
                  </div>
                  <div class="flex_1 padd12 bor_r center">
                    <div v-if="is_one">{{ itemData.remark }}</div>
                    <a-input
                      v-else
                      :style="{ width: '340px' }"
                      v-model="itemData.remark"
                      placeholder=""
                      allow-clear
                    />
                  </div>
                </div>
              </div>
              <div class="flex_1 flex flex_column">
                <div class="flex">
                  <div class="flex_1 padd12 bor_r bor_b center">
                    <div>返单</div>
                  </div>
                  <div class="flex_1 padd12 bor_b center">
                    <div></div>
                  </div>
                </div>
                <div class="flex">
                  <div class="flex_1 padd12 bor_r bor_b center">
                    <div>承运人</div>
                  </div>
                  <div class="flex_1 padd12 bor_b center">
                    <div></div>
                  </div>
                </div>
                <div class="flex">
                  <div class="flex_1 padd12 bor_r bor_b center">
                    <div>操作员</div>
                  </div>
                  <div class="flex_1 padd12 bor_b center">
                    <div></div>
                  </div>
                </div>
                <div class="flex flex_1">
                  <div class="flex_1 padd12 bor_r center">
                    <div>托运人签章</div>
                  </div>
                  <div class="flex_1 padd12 center">
                    <div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px" class="flex justify_end">
      <a-button type="primary" @click="handleTijiao" v-if="!is_one"
        >提交</a-button
      >
      <a-button type="primary" v-print="printObj" v-else>打印</a-button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, reactive, onMounted } from "vue";
import { request } from "@/utils/request.js";
import sendForm from "@/api/send/sendForm";
import { pinyin } from "pinyin-pro";
import predictionOrder from "@/api/prediction/predictionOrder";
import commonApi from "@/api/common";
import { Message } from "@arco-design/web-vue";
const props = defineProps({
  row: Object,
  user: Object
});
const is_one = ref(false);
const emit = defineEmits(["shuaxin"]);
const printObj = {
  id: "peisingContent",
  popTitle: "页面打印"
};
const filterOption = (v, option) => {
  return option.keywords.some((keywords) => keywords.includes(v));
};
const dept_list = ref([]); // 配送公司
const dept_lists = ref([]); // 个人企业
const guanxiaquList = ref([]);
const transporTypeList = ref([]);
const contractList = ref([]);
const daodadiList = ref([]);
const itemData = ref({
  peisong_dept_id: "",
  transport_type: "",
  delivery_unit: "",
  delivery_tel: "",
  dept_id: "",
  fh_mobile: "",
  fh_address: "",
  remark: "",
  require: "",
  pick_time: ""
});
const handlePeiSong = (id) => {
  let name = "";
  dept_list.value.map((v, i) => {
    if (v.id == id) {
      name = v.name;
    }
  });
  return name;
};
const handledept = (id) => {
  let name = "";
  dept_lists.value.map((v, i) => {
    if (v.id == id) {
      name = v.name;
    }
  });
  return name;
};
const handleYunshu = (id) => {
  let name = "";
  transporTypeList.value.map((v, i) => {
    if (v.key == id) {
      name = v.title;
    }
  });
  return name;
};
onMounted(() => {
  request({
    url: "system/dept/remote",
    method: "post",
    data: {
      openPage: false,
      remoteOption: {
        filter: {
          type: ["=", 3],
          status: ["=", 1]
        },
        select: ["id", "name"],
        sort: { id: "desc" }
      }
    }
  }).then((res) => {
    res.data.map((v, i) => {
      v.keywords = [
        v.name,
        pinyin(v.name, { toneType: "none", pattern: "first" })
          .split(" ")
          .join(""),
        pinyin(v.name, { toneType: "none", pattern: "first" })
          .split(" ")
          .join("")
          .toUpperCase()
      ];
    });
    dept_list.value = res.data;
  });
  request({
    url: "system/userContractAddress/index",
    method: "get",
    params: {
      page: 1,
      pageSize: 1000,
      contract_id: props.row.contract_id
    }
  }).then((res) => {
    contractList.value = res.data.items;
  });

  request({
    url: "system/dept/remote",
    method: "post",
    data: {
      openPage: false,
      remoteOption: {
        filter: {
          type: ["=", 2],
          status: ["=", 1]
        },
        select: ["id", "name"],
        sort: { id: "desc" }
      }
    }
  }).then((res) => {
    res.data.map((v, i) => {
      v.keywords = [
        v.name,
        pinyin(v.name, { toneType: "none", pattern: "first" })
          .split(" ")
          .join(""),
        pinyin(v.name, { toneType: "none", pattern: "first" })
          .split(" ")
          .join("")
          .toUpperCase()
      ];
    });
    dept_lists.value = res.data;
  });
  commonApi.getDict("guanxiaqu").then((res) => {
    guanxiaquList.value = res.data;
  });
  commonApi.getDict("daodadi").then((res) => {
    daodadiList.value = res.data;
  });
  commonApi.getDict("transport_type").then((res) => {
    transporTypeList.value = res.data;
  });
  itemData.value = JSON.parse(JSON.stringify(props.row));
  if (itemData.value.goods_data !== null) {
    if (
      typeof itemData.value.goods_data === "object" &&
      Array.isArray(itemData.value.goods_data)
    ) {
    } else if (
      typeof itemData.value.goods_data === "object" &&
      !Array.isArray(itemData.value.goods_data)
    ) {
      itemData.value.goods_data = [itemData.value.goods_data];
    }
  } else {
    itemData.value.goods_data = [];
  }
  itemData.value.goods_data.map((v, i) => {
    v.type = 1;
    v.hz_weight = (v.hz_weight - 0).toFixed(2);
  });
  if (itemData.value.goods_data.length == 0) {
    itemData.value.goods_data.push({ type: 2 }, { type: 2 }, { type: 2 });
  } else if (itemData.value.goods_data.length == 1) {
    itemData.value.goods_data.push({ type: 2 }, { type: 2 });
  } else if (itemData.value.goods_data.length == 2) {
    itemData.value.goods_data.push({ type: 2 });
  } else {
    itemData.value.goods_data = itemData.value.goods_data.slice(0, 3);
  }
  itemData.value.shipping_address =
    itemData.value.peisong_address == null
      ? ""
      : itemData.value.peisong_address.id;
  itemData.value.delivery_unit = "";
  itemData.value.delivery_tel = itemData.value.send_time = "";
  itemData.value.fh_mobile = itemData.value.customer_tel;
  itemData.value.fh_address =
    itemData.value.peisong_address == null
      ? ""
      : itemData.value.peisong_address.address;
  // peisong_address
  itemData.value.remark = "";
  itemData.value.require = "";
  itemData.value.pick_time = "";
  itemData.value.peisong_dept_id = itemData.value.peisong_dept_id || "";
  itemData.value.transport_type = itemData.value.transport_type + "";

  console.log("props.row:", props.row);
  console.log("temData.value:", itemData.value);

  if (props.row.order_detail.length != 0) {
    request({
      url: "prediction/order/index",
      method: "get",
      params: {
        page: 1,
        pageSize: 10,
        type: 2,
        order_no: props.row.order_detail[0].order.order_no
      }
    }).then((res) => {
      is_one.value = true;
      let itemDatas = res.data.items[0];
      itemData.value.peisong_dept_id = itemDatas.peisong_dept_id;
      itemData.value.transport_type = itemDatas.transport_type;
      itemData.value.delivery_unit = itemDatas.delivery_unit;
      itemData.value.delivery_tel = itemDatas.delivery_tel;
      itemData.value.dept_id = itemDatas.dept_id;
      itemData.value.fh_mobile = itemDatas.fh_mobile;
      itemData.value.fh_address = itemDatas.fh_address;
      itemData.value.remark = itemDatas.remark;
      itemData.value.require = itemDatas.require;
      itemData.value.pick_time =
        itemDatas.pick_time == null ? "" : itemDatas.pick_time;

      console.log("获取订单:", res);
    });
  }
  console.log("获取订单:", itemData.value);
});
const onChange = (e) => {
  itemData.value.pick_time = e;
};
const handleTijiao = () => {
  if (itemData.value.peisong_dept_id == "") {
    return Message.error("请选择配送单位");
  }
  if (itemData.value.transport_type == "") {
    return Message.error("请选择运输类型");
  }
  if (itemData.value.fh_address == "") {
    return Message.error("请输入接取地址");
  }
  let item = {};
  if (itemData.value.service_type == 1 || itemData.value.service_type == 3) {
    item = {
      item: [itemData.value],
      leixing: {
        service_type: {
          _rawValue: itemData.value.service_type
        }
      },
      peisong_dept_id: itemData.value.peisong_dept_id,
      service_type: itemData.value.service_type,
      delivery_unit: itemData.value.delivery_unit,
      delivery_tel: itemData.value.delivery_tel,
      process_time: itemData.value.process_time,
      fh_mobile: itemData.value.fh_mobile,
      fh_address: itemData.value.fh_address,
      remark: itemData.value.remark,
      require: itemData.value.require,
      pick_time: itemData.value.pick_time,
      type: 2
    };
  } else {
    item = {
      item: [itemData.value],
      leixing: {
        service_type: {
          _rawValue: itemData.value.service_type
        }
      },
      peisong_dept_id: itemData.value.peisong_dept_id,
      service_type: itemData.value.service_type,
      process_time: itemData.value.process_time,
      delivery_unit: itemData.value.delivery_unit,
      delivery_tel: itemData.value.delivery_tel,
      fh_mobile: itemData.value.fh_mobile,
      fh_address: itemData.value.fh_address,
      remark: itemData.value.remark,
      require: itemData.value.require || "",
      pick_time: itemData.value.pick_time,
      type: 2
    };
  }
  predictionOrder.save(item).then((res) => {
    if (res.code == 200) {
      Message.success("提交成功");
      is_one.value = true;
      emit("shuaxin");
    }
  });
};
const handleAddress = (e) => {
  contractList.value.map((v, i) => {
    if (v.id == e) {
      itemData.value.fh_address = v.address;
    }
  });
};
const handleChange = (e) => {
  dept_lists.value.map((v, i) => {
    if (v.id == e) {
      formData.value.dept_name = v.name;
    }
  });
};
</script>

<style lang="less" scoped>
.box {
  width: 210mm;
  padding: 20px 24px;
  box-sizing: border-box;
  position: relative;
}
.logoImg {
  position: absolute;
  top: 0px;
  width: 200px;
}
.border {
  border: 1px solid rgba(0, 0, 0, 1);
}
.bor_r {
  border-right: 1px solid rgba(0, 0, 0, 1);
}
.bor_b {
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}
.padd12 {
  padding: 8px 10px;
  box-sizing: border-box;
}
.text_center {
  text-align: center;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
